<template>
	<view class="account-banner ">
		<view class="uni-column accont-box bg-gradual-blue" v-if="isLoginOn&&userInfo!=null">
			<view class="total uni-row">
				<view class="nickanme">
					<view class="total-name">帅气的你</view>
					<view class="total-value">{{userInfo.nickname}}</view>
				</view>
				<view class="uni-column total-balance">
					<view class="total-name">总净资产</view>
					<view class="total-value">{{userInfo.totalBalance}} USDT</view>
				</view>
			</view>
			<view class="split uni-row">
				<view class="bb uni-column">
					<view class="split-item">币币帐户</view>
					<view class="split-value">{{userInfo.spotBalance}} USDT</view>
				</view>
				<view class="hy uni-column">
					<view class="split-item">合约帐户</view>
					<view class="split-value">{{userInfo.futureBalance}} USDT</view>
				</view>
				<view class="hy uni-column">
					<view class="split-item">积分余额</view>
					<view class="split-value">{{userInfo.bkbBalance}} </view>
				</view>
			</view>
		</view>
		<view class="uni-column accont-box bg-gradual-blue" v-else>
			<swiper class="flex-xl-column" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="false" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiderList" :key="index">
					<view class="uni-column padding-xl" @tap="toTarget(item.url,index)" style="padding-top: 15rpx;">
						<view class="flex-twice text-sl" style="color: #FFFFFF;">{{item.firstTitle}}</view>
						<view class="flex-sub text-df" style="color: #E4E4E4;">{{item.sencondTitle}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// class="account-banner bg-img bg-mask flex align-center " style="background-image: url('/static/img/bg-account.jpg')"
	var _self
	export default {
		props: {
			isLoginOn: false
		},
		data() {
			return {
				userInfo: null,
				dotStyle: false,
				cardCur: 0,
				swiderList: [{
						firstTitle: '新手入门',
						sencondTitle: '专业服务，无微不至，让你的交易更科学。',
						url: '/pages/ucenter/setting/newjoiner'
					},
					{
						firstTitle: '加入社群',
						sencondTitle: '请教问题或分享经验，快来加入社区吧。',
						url: '/pages/ucenter/setting/contact'
					},
					{
						firstTitle: 'OKEX注册',
						sencondTitle: '站内注册，积分享不停。',
						url: '/pages/ucenter/setting/okexbase'
					}
				]
			}
		},

		mounted() {
			console.log('home on mounted')
			_self = this
			if (this.userInfo == null) {
				console.log('user info is null')
				this.getUserInfo()
			}
			uni.$on("freshUser", this.fresh)
		},

		onShow() {
			console.log('home on show')
			if (this.userInfo == null) {
				this.getUserInfo()
			}
		},

		methods: {
			toTarget(url, index) {
				uni.navigateTo({
					url: url
				})
			},
			getUserInfo() {
				console.log("get user Info " + this.getToken())
				if (this.getToken() != null) {
					uni.request({
						url: this.api + '/users/info',
						method: 'GET',
						header: {
							"Authorization": "Bearer " + this.getToken()
						},
						success: res => {
							console.log("get user info resps")
							console.log(res.data.data)
							if (_self.ifElseReturn(res)) {
								this.userInfo = res.data.data
								console.log('set share url ' + res.data.data.shareUrl)
								_self.setShareUrl(res.data.data.shareUrl)
								uni.setStorageSync("XSOCKETTOKEN", res.data.data.socketToken)
								_self.setChannel(res.data.data.channel)
							} else {
								_self.removeToken()
								uni.showModal({
									title: '系统异常',
									content: '用户不存在，请重新登录',
									complete: () => {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}
								})
							}
						}
					});
				}

			},
			freshUser() {
				if (this.userInfo == null||this.isLoginOn) {
					this.getUserInfo()
				}
			},
			fresh: function() {
				console.log('fresh user')
				this.freshUser()
			}

		}
	}
</script>

<style>
	.account-banner {
		height: 300upx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.account-banner view {
		/* border: #000000 1px solid; */
	}

	.accont-box {
		/* border-radius: 15rpx; */
		/* height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('/static/img/bg-account.jpg'); */
		/* class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;" */
	}

	.total {
		flex: 3;
		padding-top: 20upx;
	}

	.my-tip {
		color: #FFFFFF;
	}

	.nickanme {
		width: 25%;
		color: #FFFFFF;
		font-size: 25upx;
	}

	/* .total-balance{
	 flex: 3;
 } */

	.split {
		flex: 2;
		padding-bottom: 20upx;
	}

	.total-name {
		padding-left: 15upx;
		flex: 1;
		color: #FFFFFF;
	}

	.total-value {
		padding-left: 15upx;
		flex: 2;
		color: #FFFFFF;
		font-size: 40upx;
	}

	.bb {
		flex: 1;
	}

	.hy {
		flex: 1;
	}

	.split-item {
		padding-left: 15upx;
		flex: 1;
		color: #FFFFFF;
	}

	.split-value {
		padding-left: 15upx;
		flex: 1;
		color: #FFFFFF;
	}
</style>
